<template>
	<view class="detailWrapper wd100bd" v-if="detail">
		<view class="titleCard wd100bd">
			<view class="addressshopInfo rowCenBet wd100bd">
				<view class="leftbar">
					<view class="titletxt">
						{{detail.name}}
					</view>
					<view class="addresstxt">
						<view class="shop-platform">
							<image class="platform-img" :src="detail.platformLogo"></image>
							<text class="platform-title">{{detail.platformName}}</text>
						</view>
						<text class="distance">{{detail.distance}}</text>
					</view>


				</view>
				<image class="shopicon" :src="detail.logo" mode="scaleToFill"></image>
			</view>

			<view class="rowCen wd100bd tagbars">
				<view class="redtags rowCen" v-if="detail.platform == 1">
					<view class="whitefont rowCenCen">
						返
					</view>
					<view class="borderfont rowCen">
						约按实付的{{detail.plan.ratio}}返
					</view>
				</view>

				<view class="redtags rowCen">
					<view class="borderfont rowCen">
						最高返 {{detail.plan.commission}}
					</view>
				</view>

				<view class="redtags rowCen" v-if="detail.platform == 2">
					<view class="borderfont rowCen">
						{{detail.plan.commission_rate_text}}
					</view>
				</view>





				<view class=" rowCenCen orgtags" v-if="detail.plan.planType == 1">
					{{detail.plan.planTypeCh}}
				</view>

				<view class=" rowCenCen greentags" v-if="detail.plan.planType == 2">
					{{detail.plan.planTypeCh}}
				</view>
			</view>

			<view class="wd100bd cardbbar rowCenBet">
				<view class="rowCen">
					<view class="iconcol colCen" @click="showCopy(detail.name)">
						<image class="iconimg"
							src="https://xgz-saas.oss-cn-beijing.aliyuncs.com/20240328/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240410225037.png"
							mode=""></image>
						<view class="icontxt">
							复制店铺名
						</view>
					</view>
					<view class="iconcol colCen" @click="getHongBao()">
						<image class="iconimg" :src="detail.platformLogo" mode=""></image>
						<view class="icontxt" style="color: #FE5342;">
							领外卖红包
						</view>
					</view>
				</view>
				<view class="righttxt icondiy" @click="previewStore">
					<text class="txt-box">进店查看详情(非下单链接) </text>
					<u-icon name="arrow-right" color="#666666" size="12"></u-icon>
				</view>
				<!-- <view class="sbtxt icondiy">
					&#xeb65; 失败上报
				</view> -->
			</view>
		</view>


		<!-- <view class="classifyItem wd100 colCen">
			<view class="itemtitle wd100 pd30 bdbox rowCenBet">
				<view class="rowCen">
					<view class="rowCen lfttxt">
						本店
					</view>
					<image class="cateicon"
						src="https://xgz-saas.oss-cn-beijing.aliyuncs.com/20240328/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240410225254.png"
						mode=""></image>
				</view>

				<view class="righttxt icondiy" @click="previewStore">
					<text class="txt-box">进店查看全部(非下单链接) </text>
					<u-icon name="arrow-right" color="#666666" size="12"></u-icon>
				</view>
			</view>

			<scroll-view class="itemScroll wd100" :scroll-x="true" >
				<view class="listContent">
					<view class="itembox colCen" v-for="(itm,index) in pageInfo.skuList" :key="index"
						@click="godetails(itm.id)">
						<view class="imgbox rowCenCen">
							<image v-if="index<3" class="absimg"
								:src="`https://xgz-saas.oss-cn-beijing.aliyuncs.com/20240328/${index+1}.png`" mode="">
							</image>
							<image class="itmpic" :src="itm.picUrl" mode="aspectFill"></image>
						</view>
						<text class="itmtxt">{{itm.name}}</text>
						<view class="pricebar rowCen wd100bd">
							<view class="redprice">
								￥{{itm.actPrice}}
							</view>
							<view class="throubox">
								￥{{itm.oriPrice}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->


		<view class="titleCard actcard">
			<view class="cardtltle rowCen">
				活动要求 <text class="spantxt">必须先抢单,后下单</text>
			</view>
			<view class="keyvaluebar wd100 rowCen">
				<view class="leftkey">
					平台
				</view>
				<view class="valarea rowCen">
					<image class="platicon" :src="detail.platformLogo" mode=""></image>
					{{detail.platformName}}
					剩余名额<text>{{detail.plan.restStock}}</text>份
				</view>
			</view>
			<view class="keyvaluebar wd100 rowCen">
				<view class="leftkey">
					要求
				</view>
				<view class="valarea rowCen">
					{{detail.plan.planTypeDescCh}}
				</view>
			</view>
			<view class="keyvaluebar wd100 rowCen">
				<view class="leftkey">
					返利
				</view>
				<view class="valarea rowCen">
					最高返{{detail.plan.commission}}
					<text v-if="detail.platform == 1">,按实付的{{detail.plan.ratio}}返</text>
					<text v-if="detail.platform == 2">,实付金额需>= {{detail.plan.minAmount}}</text>
				</view>
			</view>
			<view class="keyvaluebar wd100 rowCen">
				<view class="leftkey">
					限购
				</view>
				<view class="valarea rowCen">
					{{detail.limitBuyCh}},多买无返现
				</view>
			</view>
		</view>

		<view class="titleCard actcard">
			<view class="cardtltle rowCen">
				报名须知
			</view>
			<view class="wd100 " style="margin-top: 10rpx;font-size: 28rpx;"><!-- rowCen -->
				<u-parse :content="detail.rule"></u-parse>
			</view>
		</view>

		<view class="bottombox">
		</view>


		<view class="footerWrap rowSta">
			<view class="footBar-container rowCenBet borderBox">
				<button class="colCenCen shareBtn" style="margin-right: 10rpx;" @click="gohome()">
					<u-icon name="home" color="#666666" size="20"></u-icon>
					<view class="sharetxt">
						首页
					</view>
				</button>
				<!-- <button class="colCenCen shareBtn" data-name="shareBtn" open-type="share">
						<u-icon name="server-man" color="#666666" size="20"></u-icon>
					<view class="sharetxt">
						客服
					</view>
				</button> -->
				<view class=" rowCen borderBox"
					style="margin-right: 20rpx;padding: 0 10rpx !important;width:200rpx;background-color: #F65A45;height: 76rpx;padding: 0 10rpx;color: #fff;border-radius: 40rpx;">
					<view class="  btnbox colCenCen" @tap="getHongBao()"
						style="width: 100rpx;width:200rpx;font-size: 28rpx;">
						<view class="texttips">
							领外卖红包
						</view>
					</view>
				</view>

				<view class="right-container rowCen borderBox">
					<view class="rightbackbox btnbox colCenCen" @tap="gradOrder()">
						<view class="texttips">
							立即抢单
						</view>
					</view>
				</view>
				<!-- <view class="game" @tap="gameProgram">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/bwc/game.png" mode="scaleToFill"></image>
				</view> -->
			</view>
		</view>

		<grabModal ref="grabModal" @confirmOrder="subOrderInfo"></grabModal>

	</view>
</template>

<script>
	import * as Api from '@/api/bwc.js'
	import * as taokeApi from '@/api/taoke.js'
	import * as UserApi from '@/api/user'
	import grabModal from "@/components/grabModal.vue"
	import storage from '@/utils/storage.js';
	export default {
		components: {
			grabModal
		},
		data() {
			return {
				detail: "",
				pageInfo: "",
				waiMaiInfo: ""
			}
		},
		onLoad() {
			this.pageInfo = uni.getStorageSync('bwc')
			console.log(this.pageInfo)
			this.getShopDetail()
		},
		methods: {
			// 跳转小游戏
			async gameProgram() {
				if (storage.get("token")) {
					uni.showLoading()
					if (!storage.get("userInfo")) {
						let res = await UserApi.getUserInfo()
						if (res.code == 1) {
							storage.set('userInfo', res.data);
						}
					}
					uni.navigateToMiniProgram({
						appId: "wxf29d7a2b65ab5fe0",
						path: "",
						extraData: {
							'openid': storage.get("userInfo").auth.openid
						},
						envVersion: 'trial',
						success(res) {
							uni.hideLoading()
						},
						fail(err) {
							uni.hideLoading()
						}
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '此时此刻需要您登录喔~',
						// showCancel: false,
						confirmText: "去登录",
						cancelText: "再逛会",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								})
							}
						},
					})
				}
			},
			getShopDetail() {
				let odphone = uni.getStorageSync('odphone')
				Api.getShopDetail({
					planId: this.pageInfo.actobj.planId,
					telephone: odphone,
					lat: this.pageInfo.lat,
					lng: this.pageInfo.lon,
				}).then((res) => {
					if (res.code == 1) {
						this.detail = res.data
					} else {
						return this.$toast(res.msg);
					}
				}).catch((e) => {
					return this.$toast('接口请求错误');
				})

			},
			gohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			gradOrder() {
				this.$refs.grabModal.show()
			},
			showCopy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			// 预览店铺
			previewStore() {
				// #ifdef MP-WEIXIN
				let appId = "";
				let path = "";
				switch (this.detail.platform) {
					case 1:
						appId = this.detail.actionUrl.wxMini.mt.appid;
						path = this.detail.actionUrl.wxMini.mt.path;
						break;
					case 2:
						appId = this.detail.actionUrl.wxMini.elm.appid;
						path = this.detail.actionUrl.wxMini.elm.path;
						break;
					default:
						break;
				}
				if (appId != '') {
					uni.openEmbeddedMiniProgram({
						appId: appId,
						path: path,
						allowFullScreen: true,
						success(res) {},
						fail(err) {}
					})
				}

				// #endif
				// #ifdef H5
				window.location.href = this.detail.actionUrl.mt
				// #endif
			},
			async subOrderInfo(phone) {
				uni.showLoading()
				try {
					Api.signUnionUp({
						poiEventId: this.detail.plan.planId,
						telephone: phone,
						lat: this.pageInfo.lat,
						lng: this.pageInfo.lon,
						goodsTitle: this.detail.name,
						goodsImage: this.detail.logo,
						goodsLabel: this.detail.platform == 1 ? "约按实付的" + this.detail.plan.ratio + "返" : this
							.pageInfo.actobj.commission_rate_text,
						ratio: this.detail.plan.ratio,
						goodsType: this.detail.plan.planType,
						actionUrl: this.detail.actionUrl,
						platform: this.detail.platform,
						maxCommission: this.detail.plan.commission
					}).then((res) => {
						if (res.code == 1) {
							console.log("======" + JSON.stringify(res))
							uni.hideLoading()
							uni.showToast({
								title: "报名成功,请尽快下单",
								icon: 'none'
							})
							// 报名成功
							uni.redirectTo({
								url: '/pages/order/detail?orderId=' + res.data.orderId
							})
						} else {
							return this.$toast(res.msg);
						}
					}).catch((e) => {
						return this.$toast('接口请求错误');
					})

				} catch (e) {
					console.log(e)
					uni.hideLoading()
					//TODO handle the exception
				}
			},
			async getHongBao() {
				try {
					uni.showLoading({
						title: "获取数据中"
					})
					taokeApi.generateLink({
						'type': this.detail.platform == 1 ? 'meituan' : 'ele'
					}).then((res) => {
						if (res.code == 1) {
							uni.hideLoading()

							// #ifdef H5
							window.location.href = (res.data.h5 == "" || res.data.h5 == null) ? res.data
								.longH5 : res.data.h5
							// #endif

							// #ifdef MP-WEIXIN
							uni.openEmbeddedMiniProgram({
								appId: res.data.weAppInfo.appId,
								path: res.data.weAppInfo.pagePath,
								allowFullScreen: true,
								success(res) {},
								fail(err) {}
							})
							// #endif
						} else {
							return this.$toast(res.msg);
						}
					}).catch((e) => {
						return this.$toast('接口请求错误');
					})

				} catch (e) {
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detailWrapper {
		padding: 0 20rpx !important;
		width: 100%;

		.titleCard {
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.leftbar {
				flex: 1;
			}

			.titletxt {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.addresstxt {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.shop-platform {
					display: flex;
					flex-direction: row;
					align-items: center;

					.platform-img {
						width: 30rpx;
						height: 30rpx;
					}

					.platform-title {
						margin-left: 5rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.distance {
					font-size: 24rpx;
					color: #666666;
				}
			}

			.shopicon {
				width: 106rpx;
				height: 106rpx;
				margin-left: 40rpx;
				border-radius: 12rpx;
				overflow: hidden;
			}


			.tagbars {
				height: 38rpx;
				margin-top: 20rpx;

				.redtags {
					margin-right: 16rpx;
					height: 38rpx;
					border-radius: 4rpx;
					overflow: hidden;
					border: 1rpx solid #FE5A49;

					.whitefont {
						padding: 0 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						height: 38rpx;
						background: #FE5A49;
					}

					.borderfont {
						padding: 0 12rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #FE5A49;
					}
				}

			}

			.cardbbar {
				margin-top: 30rpx;

				.sbtxt {
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
				}

				.iconcol {
					margin-right: 20rpx;

					.iconimg {
						width: 50rpx;
						height: 50rpx;
					}

					.icontxt {
						font-weight: 500;
						font-size: 20rpx;
						color: #FE7C0C;
						margin-top: 8rpx;
					}
				}
			}
		}


		.classifyItem {
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding-bottom: 24rpx;

			.itemtitle {
				margin: 28rpx 0;

				.cateicon {
					width: 76rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}

				.lfttxt {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}


			}

			.itemScroll {

				.listContent {
					padding: 0 20rpx;
					display: inline-flex;

					.itembox {
						width: 190rpx;
						margin-right: 20rpx;

						.imgbox {
							width: 190rpx;
							height: 190rpx;
							position: relative;
							overflow: hidden;
							border-radius: 16rpx;

							.absimg {
								width: 34rpx;
								height: 46rpx;
								position: absolute;
								left: 0;
								top: 0;
							}

							.itmpic {
								width: 190rpx;
								height: 190rpx;
							}
						}



						.pricebar {
							margin-top: 10rpx;

							.redprice {
								font-weight: bold;
								font-size: 26rpx;
								color: #FF3824;
							}

							.throubox {
								font-weight: 500;
								font-size: 24rpx;
								color: #999999;
								text-decoration-line: line-through;
							}
						}

						.itmtxt {
							width: 230rpx;
							padding: 0 15rpx;
							box-sizing: border-box;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							line-height: 36rpx;
							margin-top: 14rpx;
						}
					}
				}
			}
		}

		.actcard {
			// width: 100%;

			.cardtltle {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;

				.spantxt {
					font-weight: 500;
					font-size: 24rpx;
					color: red;
					margin-left: 15rpx;
				}
			}

			.keyvaluebar {
				height: 86rpx;
				border-bottom: 1rpx solid #f8f8f8;

				.leftkey {
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
				}

				.valarea {
					padding: 0 30rpx;
					font-weight: 600;
					font-size: 26rpx;
					color: black;
					font-weight: 700;

					.platicon {
						width: 26rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.bottombox {
			width: 100%;
			margin-top: 20rpx;
			height: calc(110rpx + env(safe-area-inset-bottom));
		}

		.footerWrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			padding-bottom: calc(env(safe-area-inset-bottom));

			.shareBtn {
				background: transparent;
				padding: 0rpx !important;
				width: 80rpx;
				margin-right: 40rpx;
				color: #666666;
				justify-content: center;

				.icondiy {
					line-height: 38rpx;
					font-size: 38rpx;
				}

				.sharetxt {
					font-size: 20rpx;
					line-height: 1;
					margin-top: 10rpx;
					white-space: nowrap;
				}
			}

			.shareBtn::after {
				display: none;
			}

			.footBar-container {
				width: 100%;
				height: 110rpx;
				padding: 0 32rpx;


				.right-container {
					flex: 1;
					width: 250rpx;
					height: 76rpx;
					border-radius: 40rpx;
					overflow: hidden;

					.btnbox {
						width: 100%;
						height: 100%;
						font-size: 28rpx;

						.priceText {
							font-size: 28rpx;
							line-height: 1;
							font-weight: 500;
							color: #FFFFFF;
						}

						.texttips {
							font-size: 28rpx !important;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.leftsharebox {
						background: #FFEDE3;

						.priceText {
							color: #FE353D;
						}

						.texttips {
							color: #FE353D;
						}
					}

					.rightbackbox {
						background: #F65A45;
					}
				}

				.game {
					flex: 1;
					text-align: center;

					image {
						width: 76rpx;
						height: 76rpx;
					}
				}
			}
		}

	}

	.greentags {
		padding: 0 8rpx;
		height: 38rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #26AE5B;
		background: #EBFAF1;
		border-radius: 4rpx;
		border: 1rpx solid #25AE5B;
	}

	.orgtags {
		margin-right: 16rpx;
		padding: 0 8rpx;
		height: 38rpx;
		background: #FDFBF8;
		border-radius: 4rpx;
		border: 1rpx solid #F65A45;
		font-weight: 500;
		font-size: 20rpx;
		color: #FE7C0C;
	}

	.righttxt {
		display: flex;
		flex-direction: row;
		align-items: center;

		.txt-box {
			padding-bottom: 6rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
		}
	}
</style>